<template>
  <div class="h-full w-full bg-gray-100 flex flex-row">
    <!-- left -->
    <div class="w-1/3 h-full bg-gray-50 flex flex-row">
      <!-- 左侧按钮导航 -->
      <div class="w-20 h-full border-r-2 border-gray-200 flex flex-col items-center">
        <!-- 顶部标签 -->
        <div class="avatar placeholder p-4">
          <div class="bg-red-500 text-neutral-content rounded w-12">
            <span>MX</span>
          </div>
        </div>
        <!-- 导航按钮 -->
        <div
          class="w-full mb-4 flex flex-col items-center hover:border-r-4 hover:border-gray-500"
          v-for="i in 10"
        >
          <button class="btn btn-square btn-ghost">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- 客户管理 -->
      <div class="grow h-full flex flex-col">
        <!-- 栏目标题 -->
        <div class="flex justify-between p-4">
          <div class="text-xl font-bold border-l-2 border-blue-300 pl-4">客户管理</div>
          <button class="btn btn-sm btn-square btn-outline">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
            </svg>
          </button>
        </div>
        <!-- 栏目导航 -->
        <div class="w-full bg-gray-200 flex justify-center px-4 py-3">
          <ul class="menu bg-base-100 w-full p-2 rounded-box">
            <li class="flex flex-row justify-between">
              <a class="w-full">
                <div class="w-full flex flex-row">
                  <div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-7 w-7"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div class="ml-4">新建客户</div>
                </div>

                <div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-7 w-7"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </a>
            </li>

            <li class="flex flex-row justify-between">
              <a class="w-full">
                <div class="w-full flex flex-row">
                  <div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-7 w-7"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div class="ml-4">私海客户</div>
                </div>

                <div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-7 w-7"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </a>
            </li>
            <li class="flex flex-row justify-between">
              <a class="w-full">
                <div class="w-full flex flex-row">
                  <div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-7 w-7"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div class="ml-4">公海客户</div>
                </div>

                <div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-7 w-7"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </a>
            </li>
            <li class="flex flex-row justify-between">
              <a class="w-full">
                <div class="w-full flex flex-row">
                  <div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-7 w-7"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div class="ml-4">商机</div>
                </div>

                <div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-7 w-7"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </a>
            </li>
            <li class="flex flex-row justify-between">
              <a class="w-full">
                <div class="w-full flex flex-row">
                  <div>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-7 w-7"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                      />
                    </svg>
                  </div>
                  <div class="ml-4">线索</div>
                </div>

                <div>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-7 w-7"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </div>
              </a>
            </li>
            <!-- <li><a>私海客户</a></li>
            <li><a>公海客户</a></li>
            <li><a>商机</a></li>
            <li><a>线索</a></li>-->
          </ul>
        </div>
        <!-- 渠道效果分析 -->
        <div class="w-full flex justify-center px-4 py-2">
          <div class="card w-full bg-base-50 shadow-xl">
            <div class="card-body">
              <div class="card-title font-medium flex flex-row justify-between">
                <div>渠道效果分析</div>
                <div class="dropdown">
                  <label tabindex="0" class="btn btn-sm btn-info btn-outline">
                    本周
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-4 w-4 ml-2"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                  </label>
                  <ul
                    tabindex="0"
                    class="dropdown-content menu p-2 text-sm shadow bg-base-100 rounded-box w-24"
                  >
                    <li>
                      <a>本月</a>
                    </li>
                    <li>
                      <a>本季度</a>
                    </li>
                    <li>
                      <a>本年</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="bg-red-500 h-24 w-80">echars</div>
            </div>
          </div>
        </div>
        <!-- 业绩预测 -->
        <div class="shrink w-full flex justify-center px-4 py-2">
          <div class="card w-full bg-base-50 shadow-xl">
            <div class="card-body">
              <div class="card-title font-medium flex flex-row justify-between">
                <div>业绩预测</div>
                <div class="dropdown">
                  <label tabindex="0" class="btn btn-sm btn-success btn-outline">
                    本周
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      class="h-4 w-4 ml-2"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                  </label>
                  <ul
                    tabindex="0"
                    class="dropdown-content menu p-2 text-sm shadow bg-base-100 rounded-box w-24"
                  >
                    <li>
                      <a>本月</a>
                    </li>
                    <li>
                      <a>本季度</a>
                    </li>
                    <li>
                      <a>本年</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="bg-blue-500 h-24 w-80">echars</div>
              <!-- <div class="card-actions justify-end">
                <button class="btn btn-primary">Buy Now</button>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- right -->
    <div class="w-2/3 h-full flex flex-col">
      <!-- 栏目标题 -->
      <div class="flex p-4">
        <button class="btn btn-sm btn-square btn-ghost">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <div class="text-xl font-bold ml-4">新建客户</div>
      </div>
      <!-- 表单 -->
      <div class="w-full grow p-6 pt-0">
        <div class="card w-full h-full bg-base-100 shadow-xl">
          <div class="card-body">
            <!-- <h2 class="card-title">Card title!</h2> -->
            <!-- <p>If a dog chews shoes whose shoes does he choose?</p> -->
            <!-- 表单 -->
            <div class="grow grid grid-cols-2 gap-6">
              <div class="form-control" v-for="item, index in formItems" :key="index">
                <label class="label">
                  <span class="label-text text-gray-400">{{ item.title }}</span>
                </label>
                <input
                  type="text"
                  placeholder="某某公司"
                  class="input input-info input-bordered input-md"
                />
              </div>
            </div>
            <!-- 按钮 -->
            <div class="card-actions justify-end">
              <button class="btn btn-accent" @click="showModal = true">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6 mr-2"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
                  />
                </svg>
                保 存
              </button>
              <button class="btn btn-outline">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6 mr-2"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>取 消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- modal -->
    <input type="checkbox" id="my-modal" class="modal-toggle" :checked="showModal" />
    <div class="modal">
      <div class="modal-box">
        <label @click="showModal = false" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
        <h3 class="font-bold text-lg">提示</h3>
        <p class="py-4">保存成功</p>
        <div class="modal-action">
          <label class="btn" @click="showModal = false">确 认</label>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const showModal = ref(false)
const formItems = reactive([
  { _type: 'text', title: '客户名称' },
  { _type: 'select', title: '客户来源' },
  { _type: 'text', title: '手机' },
  { _type: 'select', title: '邮箱' },
  { _type: 'text', title: '客户行业' },
  { _type: 'select', title: '客户级别' },
  { _type: 'text', title: '客户分组' },
  { _type: 'select', title: '联系阶段' },
  { _type: 'text', title: '下次联系时间' },
  { _type: 'select', title: '客户标签' },
  { _type: 'text', title: '地区定位' },
  { _type: 'select', title: '国家' },
])
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

html {
  height: 100%;
}
</style>